<template>
	<view class="">
		<!-- 搜索和查询 -->
		<view class="top">
			<view style="height: 96rpx;display: flex;
			align-items: center;justify-content: center;">
				<view class="searchview">
					<image src="../../../../static/phone/phone_search.png" style="width: 32rpx;height: 32rpx;
					margin-left: 32rpx;"></image>
					
					<input type="text" v-model="code" 
					placeholder="搜索客户名称/简称" 
					class="placeholder-view"
					confirm-type="search"
					@input="searchPeople"/>
				</view>
			</view>
			
			<view style="display: flex;align-items: center;height: 88rpx;">
				<view style="display: flex;align-items: center;margin-left:auto;margin-right: 32rpx;" @click="sift">
					<text class="ttext1" style="margin-left: 32rpx;">筛选</text>
					<image src="../../../../static/select.png" 
					style="width: 32rpx;height: 32rpx;margin-left: 4rpx;"></image>
				</view>	
			</view>
			
		</view>
		
		<!-- 列表 -->
		<view style="margin-top: 184rpx;padding-left: 32rpx;padding-right: 32rpx;" v-if="dataList.length>0">
			<view v-for="(item,index) in dataList" :key="index" @click="clickCustomer(item)">
				<view class="item">
					<view class="">
						<view class="item-title">
							<text>{{item.name}}</text>
							<text v-if="item.shortName!=null && item.shortName!=undefined">({{item.shortName}})</text>
							
						</view>
						<view class="item-title2">
							<text v-if="item.categoryDict!=null && item.categoryDict!=undefined">{{item.categoryDict}}</text>
							<text v-if="(item.categoryDict!=null && item.categoryDict!=undefined)&&
								(item.groupDict!=null && item.groupDict!=undefined)">/</text>
							<text v-if="item.groupDict!=null && item.groupDict!=undefined">{{item.groupDict}}</text>
						</view>
					</view>
					<image src="../../../../static/phone/quxuanze.png" style="width: 12rpx;height: 24rpx;margin-left: auto;"></image>
				</view>
			</view>
			
			<view class="" style="height: 200rpx;">
				
			</view>
			
		</view>
		
		<view  v-if="dataList.length==0"
			style="display: flex;align-items: center;justify-content: center;margin-top: 284rpx;">
				
			<view>
				<view style="display: flex;align-items: center;justify-content: center;">
					<image :src="no_data" style="width: 300rpx;height: 300rpx;"></image>
				</view>
				<view style="display: flex;align-items: center;justify-content: center;">
					<text style="font-weight: 400;color: #333333;font-size: 28rpx;">暂无数据</text>
				</view>
			</view>
		</view>
		
		<view class="zhezhao" v-if="showSift">
			
			<view class="view-bottom">
				<scroll-view scroll-y="true" style="height: 644rpx;">
					<view class="title-view" v-if="customerList.length>0">
						客户类型
					</view>
					<view class="sift-listview">
						<view v-for="(item,index) in customerList" :key="index" 
						:class="item.sel ? 'sift-item-foucs':'sift-item'"  @click="sfitCustomer(index)">
							{{item.name}}
						</view>
					</view>
					<view class="title-view" v-if="permissionsList.length>0">
						权限类型
					</view>
					<view class="sift-listview">
						<view v-for="(item,index) in permissionsList" :key="index" 
						:class="item.sel ? 'sift-item-foucs':'sift-item'" @click="siftPermissions(index)">
							{{item.name}}
						</view>
					</view>
					
					<view class="title-view" v-if="teamTagList.length>0">
						组别标签
					</view>
					<view class="sift-listview">
						<view v-for="(item,index) in teamTagList" :key="index" 
						:class="item.sel ? 'sift-item-foucs':'sift-item'" @click="siftTeamTag(index)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
				
				<view class="view-bottom-s">
					<view class="view-bottom-c" @click="cancelSift">
						重置
					</view>
					<view class="view-bottom-b" @click="goSift">
						确定
					</view>
				</view>
				
			</view>
		</view>
		
		<!-- 管理端  客户管理页面 -->
		<tab-bar :selected="2"></tab-bar>
	</view>
</template>

<script>
	import tabBar from '../../common/tab-bar.vue'
	let app = ""
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				marginBottom: 0,
				code:'',
				role:'',
				roleUrl: '',
				showSift:false,
				customerList:[//客户类型
				],
				categoryDict:'',
				permissionsList:[//权限类型
				],
				permDict:'',
				teamTagList:[//组别标签
				],
				groupDict:'',
				
				dataList:[],
				page:1,
				count:0,//总数
				
				no_data:getApp().globalData.baseImageUrl+'/no-data.png',
			}
		},
		onLoad() {
			let _this = this
			app = getApp()
			_this.needAdapt = app.globalData.needAdapt && app.globalData.isIPhone
			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})
			console.log(_this.needAdapt)
		
			
			
			// _this.CustomerList()
			
			//客户类型
			_this.getCustomer_type()
			//权限类别
			_this.getCustomer_perm()
			//组别标签
			_this.getCustomer_group()
		},
		onShow() {
			this.page=1
			this.dataList = []
			this.CustomerList()

		},
		onPullDownRefresh() {
			let _this = this
			_this.dataList = []
			_this.page=1
			_this.CustomerList()
		},
		onReachBottom() {
			console.log('底部')
			let _this = this
			if(_this.count==_this.dataList.length){
				uni.showToast({
					title:'暂无更多数据',
					icon:'none'
				})
				return
			}
			_this.page = _this.page + 1
			_this.CustomerList()
		},
		methods: {
			//列表查询
			async CustomerList(){
				let _this = this
				
				let parmas={
					"page":_this.page,
					"size":10,
				}
				
				if(_this.code!=''){
					parmas.keyword= _this.code
				}
				
				if(_this.categoryDict!=''){
					if(_this.categoryDict.indexOf(',')>-1){
						parmas.categoryDict = 'in:'+ _this.categoryDict
					}else{
						parmas.categoryDict = _this.categoryDict
					}
				}
				if(_this.permDict!=''){
					if(_this.permDict.indexOf(',')>-1){
						parmas.permDict = 'in:'+ _this.permDict
					}else{
						parmas.permDict =  _this.permDict
					}
				}
				if(_this.groupDict!=''){
					if(_this.groupDict.indexOf(',')>-1){
						parmas.groupDict = 'in:'+ _this.groupDict
					}else{
						parmas.groupDict =  _this.groupDict
					}
				}
						
				uni.showLoading({
					title:'正在加载...'
				})
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/customer/list`,
					data: parmas,
					method:'POST',//默认是GET
				})
				uni.hideLoading()
				console.log('客户管理',res)
				if(res.data.code==200){
					_this.count = res.data.data.count
					let list = res.data.data.list
					for (var i = 0; i < list.length; i++) {
						_this.dataList.push(list[i])
					}
					
				}
			},
			
			//客户类型
			async getCustomer_type(){
				let _this = this
				const res = await _this.$myRequest({
					url: "/comm/dict/list/param_customer_type",
				})
				console.log('客户类型',res)
				if(res.data.code==200){
					let list = res.data.data
					for (var i = 0; i < list.length; i++) {
						list[i]['sel'] = false
					}
					_this.customerList = list
				}
			},
			//权限类别
			async getCustomer_perm(){
				let _this = this
				const res = await _this.$myRequest({
					url: "/comm/dict/list/param_customer_perm",
				})
				console.log('权限类别',res)
				if(res.data.code==200){
					let list = res.data.data
					for (var i = 0; i < list.length; i++) {
						list[i]['sel'] = false
					}
					_this.permissionsList = list
				}
			},
			//组别标签
			async getCustomer_group(){
				let _this = this
				const res = await _this.$myRequest({
					url: "/comm/dict/list/param_customer_group",
				})
				console.log('组别标签',res)
				if(res.data.code==200){
					let list = res.data.data
					for (var i = 0; i < list.length; i++) {
						list[i]['sel'] = false
					}
					_this.teamTagList = list
				}
			},
			
			
			
			
			searchPeople(val){
				this.dataList = []
				this.page = 1
				this.CustomerList()
			},
			sift(){
				this.showSift = true
			},
			/**
			 * @param {Object} 客户类型
			 */
			sfitCustomer(index){
				let _this = this
				_this.customerList[index]['sel'] = !_this.customerList[index]['sel']
			},
			/**
			 * @param {Object} 权限类型
			 */
			siftPermissions(index){
				let _this = this
				_this.permissionsList[index]['sel'] = !_this.permissionsList[index]['sel']
			},
			/**
			 * @param {Object} 组别标签
			 */
			siftTeamTag(index){
				let _this = this
				_this.teamTagList[index]['sel'] = !_this.teamTagList[index]['sel']
			},
			/**
			 * 获取筛选结果
			 */
			goSift(){
				let _this = this
				_this.showSift = false
				
				let categoryDict = ''
				let permDict = ''
				let groupDict = ''
				
				for (var i = 0; i < _this.customerList.length; i++) {
					if(_this.customerList[i]['sel']){
						categoryDict =_this.customerList[i]['value'] +','+categoryDict
					}
				}
				for (var i = 0; i < _this.permissionsList.length; i++) {
					if(_this.permissionsList[i]['sel']){
						permDict =_this.permissionsList[i]['value'] +','+permDict
					}
				}
				for (var i = 0; i < _this.teamTagList.length; i++) {
					if(_this.teamTagList[i]['sel']){
						groupDict =_this.teamTagList[i]['value'] +','+groupDict
					}
				}
				
				if(categoryDict.length>1){
					categoryDict = categoryDict.substring(0,categoryDict.length-1)
				}
				if(permDict.length>1){
					permDict = permDict.substring(0,permDict.length-1)
				}
				if(groupDict.length>1){
					groupDict = groupDict.substring(0,groupDict.length-1)
				}
				
				_this.categoryDict = categoryDict
				_this.permDict = permDict
				_this.groupDict = groupDict
				_this.dataList = []
				_this.page=1
				_this.CustomerList()
			},
			
			/**
			 * 重置筛选
			 */
			cancelSift(){
				let _this = this
				for (var i = 0; i < _this.customerList.length; i++) {
					_this.customerList[i]['sel'] = false
				}
				for (var i = 0; i < _this.permissionsList.length; i++) {
					_this.permissionsList[i]['sel'] = false
					
				}
				for (var i = 0; i < _this.teamTagList.length; i++) {
					_this.teamTagList[i]['sel'] = false
					
				}
			},
			
			/**
			 * 去详情
			 */
			clickCustomer(val){
				let itemId = val.id
				uni.navigateTo({
					url:'./customMessage?itemId='+itemId
				})
			},
			
			
		},
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>
<style scoped lang="scss">
	.top{
		position: fixed;
		top: 0;
		background-color: #ffffff;
		width: 100%;
	}
	.searchview{
		height: 64rpx;
		width: 686rpx;
		background: #F7F7F7;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
	}
	.placeholder-view{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-left: 8rpx;
	}
	.ttext1{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.zhezhao {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		z-index: 9999;
		position: fixed;
		left: 0;
		top: 0;
		overflow: scroll;	
		// padding-top: 10vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.view-bottom{
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		border-radius: 8px 8px 0px 0px;
		
	}
	.view-bottom-s{
		height: 108rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx #eeeeee solid;
		background-color: #ffffff;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}
	.view-bottom-c{
		width: 260rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 1px solid #2DA9C5;
		margin-left: 32rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.view-bottom-b{
		width: 394rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E8F7FB;
		line-height: 50rpx;
		margin-left: 32rpx;
	}	
	.title-view{
		height: 114rpx;
		display: flex;
		align-items: center;
		padding-left: 32rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	}
	.sift-listview{
		display: flex;
		flex-wrap: wrap;
	}
	.sift-item{
		width: 212rpx;
		height: 72rpx;
		background: #F7F7F7;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 400;
		color: #18252C;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 26rpx;
		margin-bottom: 32rpx;
	}
	.sift-item-foucs{
		width: 212rpx;
		height: 72rpx;
		background: #E8F7FB;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 26rpx;
		margin-bottom: 32rpx;
	}
	
	.item{
		height: 126rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx #eeeeee solid;
	}
	.item-title{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.item-title2{
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top: 8rpx;
	}
</style>
